<template>
  <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {useFs} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud';
import {MenuTreeItemType} from '../../types';
import {defineComponent, nextTick, onActivated, onMounted, reactive, toRefs, watch} from "vue";
import {useTagsViewRoutes} from "/@/stores/tagsViewRoutes";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";
import * as echarts from "echarts";

// 当前选择的菜单信息
let selectOptions: any = ref({name: null});
let global: any = {
  homeChartOne: null,
  homeChartTwo: null,
  homeCharThree: null,
  dispose: [null, '', undefined],
};


const {crudRef, crudBinding, crudExpose, context} = useFs({createCrudOptions, context: {selectOptions}});
const {doRefresh, setTableData} = crudExpose;

const handleRefreshTable = (record: MenuTreeItemType) => {
  if (!record.is_catalog && record.id) {
    selectOptions.value = record;
    doRefresh();
  } else {
    //清空表格数据
    setTableData([]);
  }
};


defineExpose({selectOptions, handleRefreshTable});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
  overflow: hidden;

  .home-card-one,
  .home-card-two,
  .home-card-three {
    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);

      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }

      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;

        i {
          color: var(--el-text-color-placeholder);
        }
      }

      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }

  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/10) + s;
      }
    }
  }

  .home-card-two,
  .home-card-three {
    .home-card-item {
      height: 400px;
      width: 100%;
      overflow: hidden;

      .home-monitor {
        height: 100%;

        .flex-warp-item {
          width: 25%;
          height: 111px;
          display: flex;

          .flex-warp-item-box {
            margin: auto;
            text-align: center;
            color: var(--el-text-color-primary);
            display: flex;
            border-radius: 5px;
            background: var(--next-bg-color);
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: var(--el-color-primary-light-9);
              transition: all 0.3s ease;
            }
          }

          @for $i from 0 through $homeNavLengh {
            .home-animation#{$i} {
              opacity: 0;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
        }
      }
    }
  }
}
</style>